import React from 'react';
import { Breadcrumb, Button, Form, Col, Row, Input, Select, DatePicker,  Message} from 'antd';
import Region from '../../../components/Region/Region';
const FormItem = Form.Item;
const Option = Select.Option;

function noop() {
  return false;
}


let Add = React.createClass({


  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      loading: false,
      province: '110000',
      city: '110100',
      district: '110101',
      areaId: '110101',
      isOwn: false,
    }
  },

  handleSubmit(e){
    e.preventDefault();
    console.log('收到表单值：', this.props.form.getFieldsValue());
    let region = {province: this.state.province, city: this.state.city, district: this.state.district};
    let param = Object.assign({}, this.props.form.getFieldsValue(), region);
    console.log(param)
    this.add(param);
  },

  add(param){
    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!');
        return;
      }
      this.setState({
        loading: true,
      });
      Utils.sendAjax({
        url: '/tenement/intention/add',
        data: JSON.stringify(param),
        callback: (result) => {
          if (result.code === '200') {
            let goPathUrl = '/landlord/rentBeforeIndex/list'
            this.context.router.push(goPathUrl);
          } else {
            this.setState({
              loading: false,
            });
            Message.error(result.message, 10);
          }
        }
      });
    });
  },


  //取消按钮
  handleCancel() {
    let goPathUrl = '/landlord/rentBeforeIndex/list';
    this.context.router.push(goPathUrl);
  },

  changeAreaId(area) {
    selectedArea = String(area);
    var selectedProvince = selectedArea.substr(0, 2) + "0000";
    var selectedCity = selectedArea.substr(0, 4) + "00";
    this.setState({
      province: selectedProvince,
      city: selectedCity,
      district: selectedArea,
      areaId: area,
    })
  },
  bodyClick(){
    Message.destroy()
  },
  floor(rule, value, callback) {
    const { validateFields } = this.props.form;
    if (!value) {
      value = '';
    }
    if (!!value && value.match(/^\+?[1-9][0-9]*$/g)) {
      callback();
    } else {
      callback('请输入大于0的整数');
    }
    if (value) {
      validateFields(['totalFloor'], {force: true});
    }
    callback();
  },

  Floor(rule, value, callback) {
    const { getFieldValue } = this.props.form;
    if (!value) {
      value = '';
    }

    if (!!value && value.match(/^\+?[1-9][0-9]*$/g)) {
      if (value && value < parseInt(getFieldValue('floor'))) {
        callback('总楼层不能小于楼层数');
      } else {
        callback();
      }
    } else {
      callback('请输入大于0的整数');
    }
  },

  rentNum(rule, value, callback) {
    const { getFieldValue } = this.props.form;
    if (!value) {
      value = '';
    }
    if (!!value && value.match(/^\+?[1-9][0-9]*$/g)) {
      if (value && value < parseInt(getFieldValue('rentPeriod'))) {
        callback('租约期限不能小于付款周期');
      } else {
        callback();
      }
    } else {
      callback('请输入大于0的整数');
    }
  },

  handleChangeType(value) {
    this.setState({
      isOwn: value === 'own' ? true : false
    })
  },

  render () {
    console.log(this.state.isOwn);
    let houseData = this.state.houseData;
    const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;

    const ownerNameProps = getFieldProps('ownerName', {
      initialValue: '',
      rules: [
        {required: true, message: '业主姓名不能为空'},
        {validator: Utils.name}
      ],
    });

    const mobilePhoneProps = getFieldProps('mobilePhone', {
      initialValue: '',
      rules: [
        {required: true, message: '联系电话不能为空'},
        {validator: Utils.phone},
      ],
    });

    const tenementNameProps = getFieldProps('tenementName', {
      initialValue: '',
      rules: [
        {required: true, message: '物业名称不能为空'},
        {validator: Utils.company},
      ],
    });

    const addressProps = getFieldProps('address', {
      initialValue: '',
      rules: [
        {required: true, message: '房屋地址不能为空'},
      ],
    });


    const areaProps = getFieldProps('area', {
      initialValue: '',
      rules: [
        {required: true, message: '房屋面积不能为空'},
        {validator: Utils.num},
      ],
    });

    const decorateProps = getFieldProps('decorate', {
      initialValue: '1',
    });

    const bedroomCountProps = getFieldProps('bedroomCount', {
      initialValue: '1',
    });

    const hallCountProps = getFieldProps('hallCount', {
      initialValue: '1',
    });

    const toiletCountProps = getFieldProps('toiletCount', {
      initialValue: '1',
    });


    const floorProps = getFieldProps('floor', {
      initialValue: '',
      rules: [
        {  whitespace: true, message: '请输入楼层' },
        { validator: this.floor}
      ],
    });

    const totalFloorProps = getFieldProps('totalFloor', {
      initialValue: '',
      rules: [
        {whitespace: true, message: '请输入总楼层'},
        {validator: this.Floor}
      ],
    });
    let isOwn = this.state.isOwn;
    const leaseInceptionProps = getFieldProps('leaseInception', {
      rules: [
        {required: !isOwn, type: 'date', message: '起租时间不能为空'},
      ],
    });

    const periodProps = getFieldProps('period', {
      initialValue: '',
      rules: [
        {required: !isOwn, message: '租赁期限不能为空'},
        {validator: isOwn? '':this.rentNum}
      ],
    });
    const rentPeriodProps = getFieldProps('rentPeriod', {
      initialValue: '3',
      rules: [
        {required: !isOwn, message: '请选择付款周期',},
      ],
    });

    const rentProps = getFieldProps('rent', {
      initialValue: '',
      rules: [
        {required: !isOwn, message: '意向租金不能为空'},
        {validator: isOwn? '':Utils.num},
      ],
    });

    const isSeeProps = getFieldProps('isSee', {
      initialValue: '-1'
    });
    const remarkProps = getFieldProps('remark', {
      initialValue: ''
    });
    const typeProps = getFieldProps('type', {
      initialValue: 'rent',
      rules: [
        {required: true, message: '请选择房源所有权'},
      ],
      onChange:this.handleChangeType
    })

    return (
      <div className="inner-content" >
        <Form inline form={this.props.form}>
          <div className="form-group form-group1">
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="业主姓名">
                  <Input {...ownerNameProps} />
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="联系电话">
                  <Input {...mobilePhoneProps} />
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="物业名称">
                  <Input {...tenementNameProps} />
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="房源所有权">
                  <Select {...typeProps}
                   style={{width: 162}}
                  >
                    <Option key="rent" value="rent">租赁</Option>
                    <Option key="own" value="own">自有</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={24} className="adress">
                <span className="sign">*</span>
                <FormItem label="房源地址">
                  <Region areaId={this.state.areaId} ref="region" onAreaChange={this.changeAreaId}/>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={22} style={{marginLeft: 90}}>
                <FormItem>
                  <Input  {...addressProps} style={{width: 600}}/>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="房屋面积">
                  <Input style={{width: 162}} {...areaProps}/>
                  <span>㎡</span>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="装修情况">
                  <Select {...decorateProps}
                    style={{width: 162}}>
                    <Option value="1">毛坯</Option>
                    <Option value="2">简装</Option>
                    <Option value="3">豪华</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24}>
              <Col sm={8}>
                <FormItem label="房屋户型">
                  <Select
                    defaultValue="1" {...bedroomCountProps}
                    style={{width: 55}}>
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                    <Option value="5">5</Option>
                    <Option value="6">6</Option>
                    <Option value="7">7</Option>
                    <Option value="8">8</Option>
                    <Option value="9">9</Option>
                    <Option value="10">10</Option>
                    <Option value="11">11</Option>
                    <Option value="12">12</Option>
                  </Select>
                  <span>室</span>
                  <Select
                    defaultValue="0" {...hallCountProps}
                    style={{width: 55}}>
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                    <Option value="5">5</Option>
                    <Option value="6">6</Option>
                    <Option value="7">7</Option>
                    <Option value="8">8</Option>
                    <Option value="9">9</Option>
                    <Option value="10">10</Option>
                    <Option value="11">11</Option>
                    <Option value="12">12</Option>
                  </Select>
                  <span>厅</span>
                  <Select
                    defaultValue="0" {...toiletCountProps}
                    style={{width: 55}}>
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                    <Option value="5">5</Option>
                    <Option value="6">6</Option>
                    <Option value="7">7</Option>
                    <Option value="8">8</Option>
                    <Option value="9">9</Option>
                    <Option value="10">10</Option>
                    <Option value="11">11</Option>
                    <Option value="12">12</Option>
                  </Select>
                  <span>卫</span>
                </FormItem>
              </Col>
              <Col sm={8}>
                <FormItem label="房屋楼层">
                  <span>第</span>
                  <Input {...floorProps}  autoComplete="off" style={{width: 50}}
                                         onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                  />
                  <span>层，</span>

                </FormItem>
                <FormItem>
                  <span>共</span>
                  <Input {...totalFloorProps} autoComplete="off" style={{width: 50}}
                                              onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                  />
                  <span>层</span>
                </FormItem>
              </Col>
            </Row>
            {
              this.state.isOwn ?'':
              <div>
                <Row gutter={24}>
                  <Col sm={8}>
                    <FormItem label="房屋起租时间">
                      <DatePicker  {...leaseInceptionProps} style={{width: 162}}
                      />
                    </FormItem>
                  </Col>
                  <Col sm={8}>
                    <FormItem label="租赁期限">
                      <Input {...periodProps} style={{width: 162}}/>
                      <span>月</span>
                    </FormItem>
                  </Col>
                </Row>
                <Row gutter={24}>
                  <Col sm={8}>
                    <FormItem label="付款周期">
                      <Select {...rentPeriodProps}
                        style={{width: 162}}>
                        <Option value="3">季</Option>
                        <Option value="6">半年</Option>
                        <Option value="12">年</Option>
                      </Select>
                    </FormItem>
                  </Col>
                  <Col sm={8}>
                    <FormItem label="意向租金">
                      <Input {...rentProps} style={{width: 162}}/>
                      <span>元/月</span>
                    </FormItem>
                  </Col>
                </Row>
                <Row gutter={24}>
                  <Col sm={8}>
                    <FormItem label="是否看过房源">
                      <Select {...isSeeProps}/* {...decorateProps}*/
                        style={{width: 162}}>
                        <Option value="1">是</Option>
                        <Option value="-1">否</Option>
                      </Select>
                    </FormItem>
                  </Col>
                </Row>
              </div>
            }
            
            <Row gutter={24}>
              <Col sm={24}>
                <FormItem label="备注">
                  <Input type="textarea" placeholder="" {...remarkProps} style={{width: 600}}/>
                </FormItem>
              </Col>
            </Row>
            <Row gutter={24} style={{margin: 20}}>
              <Col sm={8} offset={3}>
                <FormItem>
                  <Button type="primary" loading={this.state.loading} onClick={this.handleSubmit}>添加房源</Button>
                  <Button type="ghost" style={{margin:20}} onClick={this.handleCancel}>取消</Button>
                </FormItem>
              </Col>
            </Row>

          </div>
        </Form>
      </div>
    );
  }
});

Add = Form.create()(Add);
export default Add